
<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js canvas - materials</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #202020;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="../build/three.r88.js"></script>

<script src="js/renderers/Projector.r88.js"></script>
<script src="js/renderers/CanvasRenderer.r88.js"></script>

<script src="js/libs/stats.min.js"></script>

<script>

    var container, stats;

    var camera, scene, renderer, objects;
    var pointLight;

    init();
    animate();

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.set(0, 200, 800);

        scene = new THREE.Scene();

        // Grid

        var gridHelper = new THREE.GridHelper(1000, 10);
        gridHelper.position.y = -120;
        scene.add(gridHelper);

        // Spheres

        var geometry = new THREE.SphereGeometry(100, 14, 7);
        var cubeGeometry = new THREE.CubeGeometry(150, 150, 150, 2, 2, 2);

        var textureLoader = new THREE.TextureLoader();

        var earthTexture = textureLoader.load('textures/land_ocean_ice_cloud_2048.jpg');

        var envMap = textureLoader.load('textures/texture-atlas.jpg');

        var materials = [
            new THREE.MeshBasicMaterial({map: earthTexture}),
            new THREE.MeshBasicMaterial({map: envMap})
        ];

        for (var i = 0, l = geometry.faces.length; i < l; i++) {

            var face = geometry.faces[i];
            //if ( Math.random() > 0.5 ) face.materialIndex = Math.floor( Math.random() * materials.length );
            if (Math.random() > 0.5) face.materialIndex = 1;
            else face.materialIndex = 0;

        }
        for (var i = 0, l = cubeGeometry.faces.length; i < l; i++) {
            var face = cubeGeometry.faces[i];
            //if ( Math.random() > 0.5 ) face.materialIndex = Math.floor( Math.random() * materials.length );
            if (Math.random() > 0.5) face.materialIndex = 1;
            else face.materialIndex = 0;
        }

        materials.push(materials);

        var sphere = new THREE.Mesh(geometry, materials);
        scene.add(sphere);

        var cube=new THREE.Mesh(cubeGeometry,materials);
        cube.position.x=300;
        scene.add(cube);


        var PI2 = Math.PI * 2;
        var program = function (context) {

            context.beginPath();
            //context.arc( 0, 0, 0.5, 0, PI2, true );
            context.fill();

        };

        // Lights

        scene.add(new THREE.AmbientLight(Math.random() * 0x202020));

        var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
        directionalLight.position.x = Math.random() - 0.5;
        directionalLight.position.y = Math.random() - 0.5;
        directionalLight.position.z = Math.random() - 0.5;
        directionalLight.position.normalize();
        scene.add(directionalLight);

        pointLight = new THREE.PointLight(0xffffff, 1);
        scene.add(pointLight);

        var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({color: 0xffffff, program: program}));
        sprite.scale.set(8, 8, 8);
        pointLight.add(sprite);

        renderer = new THREE.CanvasRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        stats = new Stats();
        container.appendChild(stats.dom);

        //

        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        var timer = Date.now() * 0.0001;

        camera.position.x = Math.cos( timer ) * 1000;
        camera.position.z = Math.sin( timer ) * 1000;
        camera.lookAt( scene.position );

        renderer.render( scene, camera );

    }

</script>

</body>
</html>
